Background properties affect how the background of an element appears. Unlike with standard HTML, any element can have a background image or color. Background images can repeat vertically, horizontally, both (the traditional tiling effect of background images in the BODY of HTML pages) or not at all (enabling easy "watermark" effects.) The way the background changes when you scroll a page can also be determined with CSS. A background image can either scroll while the page scrolls (traditional HTML appearance) or remain fixed while the text scrolls.
The background properties are
background-color, surprisingly, specifies the color of the background of an element. Any element can be given a background color with CSS.
background-color is specified as either a color value, or as transparent.
For more on color values, see our section on values.
a background-color of transparent ensures that whatever is behind an element is visible, rather than obscured by the background of the element.
If no background-color is specified, then the element has a transparent background.
background-color is not inherited by an element from its parent. However, not specifying a background-color, or setting it to transparent ensures that the color of the parent element shines through.
With traditional HTML based web pages, only an entire page can have a background image. Some browsers allow some elements, for example table cells, to have background images, but this is non standard.
CSS lets any element have a background image. As we will shortly see, the background image can be used in more ways than the simple tiled backgrounds of traditional web pages.
background images are specified as either a URL of the image to be used for the background, or by the keyword none.
For more detail on URLs see the section in the discussion on values.
If no background-image is specified, an element has a background-image of none.
background-image is not inherited from the parent element.
The URL for the background-image is relative to the style sheet, not to the HTML document. While this ought to be clear when you think about it, some versions of Navigator do not work correctly, treating the URL relative to the HTML document. This is fine if the style sheet is embedded, but doing this defeats several of the major purposes of style sheets.
So, you do the right thing and link your style sheet to the HTML document, but then make sure you put both of them in the same directory. This way the relative URLs for any background-image will be the same for both the style sheet and the HTML document, and you should achieve the effect you wanted in both Navigator and Explorer.
This solution is fine for a small site where you can put all the files in one directory. As soon as you can no longer do this (in my opinion this happens as soon as you have more than about 3 pages in your site) you have to start using an absolute URL in this situation.
It is also recommended that you specify a background-color when specifying a background-image. This ensures that if the image is unavailable (or images are off by the user), the foreground text color does not blend with the background, so text remains legible.
With traditional background images in the body of HTML documents, when the page is scrolled, the image scrolls too. With background images and CSS, you can specify that the background image should not scroll, but rather remain fixed as the page scrolls.
background-attachment can take one of two values, scroll and fixed.
scroll specifies that the background should scroll as the page scrolls (this is the current behavior of browsers when a page with a background image scrolls)
fixed specifies that the background image should not move as the page scrolls. Effectively the foreground text, images and other content scroll over a stationary background.
If no background-attachment value is specified, the default value is scroll, which reproduces the behavior of major browsers.
background-attachment is not inherited.
In practice, only body elements are affected by the background-attachment property. If and when the overflow property is well supported by major browsers, the background-attachment property of those elements may become important.
With the traditional background image associated with the body of a page, where the background image is smaller than the width and or height of the page, browsers "tile" the image (that is repeat the image horizontally and vertically).
CSS allows you to specify whether and how a browser treats background images when the width and height of the image is less than that of the element.
background-repeat can take the following values
repeat has the effect of tiling the background image horizontally and vertically like the traditional background image in web pages.
repeat-x tiles an image horizontally, but not vertically.
repeat-y tiles the image vertically but not horizontally.
no-repeat ensures that the image appears once and does not tile either horizontally or vertically.
If no background-repeat value is set, the default value of this property is repeat. This reproduces the effect of the traditional background image.
background-repeat is not inherited from the parent element.
Elements other than the body can be given a background image, and so may also have a background-repeat.
With a traditional HTML based background image, the image is placed in the top left hand corner of the page, and tiles from there.
With CSS, we can specify where a background image is placed.
If the image repeats (horizontally, vertically or both) then it repeats from this location. If there is a single image, it is placed using the background-position property.
background position is among the more complicated properties. There are several ways of specifying an image position. Positions may be specified using
Pairs of Percentage Values
When a position is specified using a pair of percentage values (for example, background-position: 0% 0%) the first value relates to the position of the top of the image, while the second relates to the position of the left of the image. The actual mechanism is best explained with examples.
Suppose we have the following property: (background-position: 15% 25%). This means that the point 15% from the top of the image is aligned with the point 15% from the top of the element. The point 25% from the left of the image is aligned with the point 25% from the left of the element.
This is a little tricky. There are more straightforward ways of specifying the position.
Pairs of Length Values
When a position is specified using a pair of length values, (for example background-position 20px 20px) the first value specifies the position of the top of the image relative to the element, while the second value specifies the position of the left of the image relative to the element.
The way in which this works is somewhat simpler than percentages. Again, let's look at an example.
With the following property (background-position 20px 30px) the top of the image is positioned 20px from the top of the element for which it is a background, while the left of the image is placed 30px from the left of the element for which it is a background.
If you are wondering quite how this differs from percentage values, see the emphasized text in this part, and compare it with the emphasized text in the part above which describes how percentage values work.
In our section on values we cover exactly what lengths are in detail.
Pairs of Keywords and Individual Keywords
Rather than relying on length values, or percentage values, keyword values can be used. Keywords have a similar effect to percentages.
The keywords which can be used to specify position are
Rather than go into laborious detail, here is the explanation from the recommendation
If no background-position is specified, this is the equivalent of a background-position of 0% 0%, that is, the top left of the background image is placed in the top left of the element.
An element does not inherit the background-position of its parent.
The background-position property lets you create watermark effects by placing a single image in the center of an element, for example in the center of a page. It is a tricky, but powerful property.
Not every type of element can have a background-position, even though any type of element can have a background image. Only block elements and replaced elements can have this property. For more on the different types of element, see the advanced style sheets section.
background is a shorthand property that lets you set any or all background properties at once.
The background property takes exactly the same types of values as the properties described in this section. To specify more than one property using the background shorthand, the various background values are separated simply by spaces.
As a simple example, this background property
background (url(http://www.westciv.com.au/gifs/bg1.gif) fixed no-repeat top center)
is the equivalent of
background-image:url(http://www.westciv.com.au/gifs/bg1.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top center;